<table-submenu></table-submenu>

<div class="content-section introduction">
    <div>
        <span class="feature-title">Table - <span class="subitem">Row Expansion</span></span>
        <span>Row expansion is used to display additional content about the row data.</span>
    </div>
</div>

<div class="content-section implementation">
    <p-table [columns]="cols" [value]="cars" dataKey="vin">
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th style="width: 3em"></th>
                <th *ngFor="let col of columns">
                    {{col.header}}
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-expanded="expanded" let-columns="columns">
            <tr>
                <td>
                    <a href="#" [pRowToggler]="rowData">
                        <i [ngClass]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></i>
                    </a>
                </td>
                <td *ngFor="let col of columns">
                    {{rowData[col.field]}}
                </td>
            </tr>
        </ng-template>
        <ng-template pTemplate="rowexpansion" let-rowData let-columns="columns">
            <tr>
                <td [attr.colspan]="columns.length + 1">
                    <div class="ui-g ui-fluid" style="font-size:16px;padding:20px" [@rowExpansionTrigger]="'active'">
                        <div class="ui-g-12 ui-md-3" style="text-align:center">
                            <img [attr.alt]="rowData.brand" src="assets/showcase/images/demo/car/{{rowData.brand}}.png">
                        </div>
                        <div class="ui-g-12 ui-md-9">
                            <div class="ui-g">
                                <div class="ui-g-12">
                                    <b>Vin:</b> {{rowData.vin}}
                                </div>
                                <div class="ui-g-12">
                                    <b>Year:</b> {{rowData.year}}
                                </div>
                                <div class="ui-g-12">
                                    <b>Brand:</b> {{rowData.brand}}
                                </div>
                                <div class="ui-g-12">
                                    <b>Color:</b> {{rowData.color}}
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
        </ng-template>
    </p-table>
</div>

<div class="content-section documentation">
    <p-tabView effect="fade">
        <p-tabPanel header="tablerowexpansiondemo.ts">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/table/tablerowexpansiondemo.ts" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-typescript" pCode ngNonBindable>
@Component(&#123;
    templateUrl: './tablerowexpansiondemo.html',
    animations: [
        trigger('rowExpansionTrigger', [
            state('void', style(&#123;
                transform: 'translateX(-10%)',
                opacity: 0
            &#125;)),
            state('active', style(&#123;
                transform: 'translateX(0)',
                opacity: 1
            &#125;)),
            transition('* &lt;=&gt; *', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
        ])
    ]
&#125;)
export class TableRowExpansionDemo implements OnInit &#123;

    cars: Car[];

    cols: any[];

    constructor(private carService: CarService) &#123; &#125;

    ngOnInit() &#123;
        this.carService.getCarsSmall().then(cars => this.cars = cars);

        this.cols = [
            &#123; field: 'vin', header: 'Vin' &#125;,
            &#123; field: 'year', header: 'Year' &#125;,
            &#123; field: 'brand', header: 'Brand' &#125;,
            &#123; field: 'color', header: 'Color' &#125;
        ];
    &#125;
&#125;
</code>
</pre>   
        </p-tabPanel>

        <p-tabPanel header="tablerowexpansiondemo.html">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/table/tablerowexpansiondemo.html" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-table [columns]="cols" [value]="cars" dataKey="vin"&gt;
    &lt;ng-template pTemplate="header" let-columns&gt;
        &lt;tr&gt;
            &lt;th style="width: 3em"&gt;&lt;/th&gt;
            &lt;th *ngFor="let col of columns"&gt;
                &#123;&#123;col.header&#125;&#125;
            &lt;/th&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="body" let-rowData let-expanded="expanded" let-columns="columns"&gt;
        &lt;tr&gt;
            &lt;td&gt;
                &lt;a href="#" [pRowToggler]="rowData"&gt;
                    &lt;i [ngClass]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"&gt;&lt;/i&gt;
                &lt;/a&gt;
            &lt;/td&gt;
            &lt;td *ngFor="let col of columns"&gt;
                &#123;&#123;rowData[col.field]&#125;&#125;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="rowexpansion" let-rowData let-columns="columns"&gt;
        &lt;tr&gt;
            &lt;td [attr.colspan]="columns.length + 1"&gt;
                &lt;div class="ui-g ui-fluid" style="font-size:16px;padding:20px"&gt;
                    &lt;div class="ui-g-12 ui-md-3" style="text-align:center"&gt;
                        &lt;img [attr.alt]="rowData.brand" src="assets/showcase/images/demo/car/&#123;&#123;rowData.brand&#125;&#125;.png"&gt;
                    &lt;/div&gt;
                    &lt;div class="ui-g-12 ui-md-9"&gt;
                        &lt;div class="ui-g"&gt;
                            &lt;div class="ui-g-12"&gt;
                                &lt;b&gt;Vin:&lt;/b&gt; &#123;&#123;rowData.vin&#125;&#125;
                            &lt;/div&gt;
                            &lt;div class="ui-g-12"&gt;
                                &lt;b&gt;Year:&lt;/b&gt; &#123;&#123;rowData.year&#125;&#125;
                            &lt;/div&gt;
                            &lt;div class="ui-g-12"&gt;
                                &lt;b&gt;Brand:&lt;/b&gt; &#123;&#123;rowData.brand&#125;&#125;
                            &lt;/div&gt;
                            &lt;div class="ui-g-12"&gt;
                                &lt;b&gt;Color:&lt;/b&gt; &#123;&#123;rowData.color&#125;&#125;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
&lt;/p-table&gt;
</code>
</pre>
        </p-tabPanel>
    </p-tabView>
</div>